// 原神首图 详情图生成
import {
  getURLBase64Image,
  loadImages,
  drawImagesAreaBg,
  drawImagesArea,
  drawBgBorder,
} from "./getUrlImg";

// 生成原神首图
export function makeTitleImgYs(data, list, attrs) {
  console.log("%c Line:11 🥓 attrs", "color:#4fff4B", attrs);
  return new Promise(async (resolve, reject) => {
    // 取出已选择项
    let arr = [];
    list = list.split(",");
    console.log("%c Line:15 🍉 list", "color:#ffdd4d", list);
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if ((item1.fieldType == "boxradio"||item1.fieldType == "checkbox") && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if(item2.childAttributes&&item2.childAttributes.length&&item2.imgUrl){
              // console.log("%c Line:25 🍷 item2", "color:#ea7e5c", item2);
              item2.childAttributes.forEach(async (item3) => {
               
                if (list.indexOf(String(item3.id)) > -1) {
                  console.log("%c Line:27 🍩 item3", "color:#93c0a4", item3.fieldName);
                  item3.imgUrl = item2.imgUrl;
                  arr.push(item3);
                }
              });
            }else{
              if (list.indexOf(String(item2.id)) > -1&&item2.imgUrl) {
                console.log("%c Line:27 🍩 item2", "color:#93c0a4", item2.fieldName);
                arr.push(item2);
              }
            }
            
          });
        }
      });
    }
    // arr
    
    try {
      let imageaaa = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/ysBg.png"
      );
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = imageaaa.width;
      canvas.height = imageaaa.height;
      context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
      context.fillStyle = "#ffff00";
      context.font = "60px Adobe Ming Std";
      context.fillText(`${data.f9 || "--"}`, 300, 350);
      context.fillText(`${data.f7 || "--"}`, 500, 559);
      context.fillText(`${data.f8 || "--"}`, 415, 765);
      //  加载皮肤图片
      context.fillStyle = "#ffffff";
      context.font = "30px Adobe Ming Std";
      let skinImgs = [];
      if (arr && arr.length) {
        skinImgs = await loadImages(arr, 28, true);
      } else {
        // 没有Sren
      }
      // .sort(sortBy("sort"))
      let instances = skinImgs.length ? skinImgs : [];
      if (instances && instances.length) {
        // 开始绘制
        // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
        let opts = {
          startX: 949,
          startY: 300,
          rowNum: 7,
          borderImg: "",
          imgWidth1: 239,
          imgHeight: 239,
          stepY: 38,
          stepX: 38,
          txtLineHeight: 1,
          hideTxt: true,
          isSign: true,
        };
        drawImagesArea(context, instances, opts);
        // 绘制结束
        const base64Url = canvas.toDataURL("image/jpeg", 0.8);
        resolve(base64Url);
      } else {
        const base64Url = canvas.toDataURL("image/jpeg", 0.8);
        resolve(base64Url);
      }
    } catch (error) {
      reject(error);
    }
  });
}
